<template>
    <div class="page has-navbar store" v-nav="{title:'选择店铺', showBackButton: true}">
        <!-- <tabs :tab-items="stores" :tab-index="tabIndex" :on-tab-click="onTabClick"></tabs> -->
        <!-- <div class="stores-list" @click="changeStore">
            <span class="store-name">
                {{nowSelStore.name}}
            </span>
            <i :class="showStoreList?'iconfont icon-jiantou1 up':'iconfont icon-jiantou1'"></i>
        </div> -->
        <div class="list">
            <ul>
                <li style="width:100%;" v-for="(item,index) in storeData" @click="selThisStore(item)" :key="index">
                    <div class="store-item">
                        <span class="store-name">
                            <span class="name">{{item.storeName}}</span>
                            <!-- <span class="rate" v-if="item.totalCount">上座率:{{(Math.round(item.count / item.totalCount * 100)).toFixed(0)}}%</span> -->
                        </span>
                        <!-- <span class="store-info">总收入:{{item.amount.toFixed(2)}}</span> -->
                        <span class="store-info">收入:{{item.amount.toFixed(2)}}<span style="padding-left:5px;">人数:{{item.count}}/{{item.totalCount}}&nbsp;</span><span v-if="item.totalCount">上座率:{{(Math.round(item.count / item.totalCount * 100)).toFixed(0)}}%</span><span style="padding-left:5px;">最高人数:{{ item.topCount }}</span></span>
                    </div>
                    <span class="arrow-right">
                        <i class="icon ion-ios-arrow-back"></i>
                    </span>
                </li>
            </ul>
        </div>
        <!-- <div class="page-content">
            <div class="enterSystem">
                <md-button class="button button-positive button-block" @click.native="enterSystem()">
                    进入店铺
                </md-button>  
            </div>
        </div> -->
    </div>
</template>

<script>
import echarts from 'echarts';
export default {
    data(){
        return {
            stores: [],
            storeData: [],
            tabIndex: 0,
            homeData: {
                "amount": 0,
                "alipayCash": 0,
                "wechatCash": 0,
                "cash": 0,
                "alipay": 0,
                "wechat": 0,
                "profit": 0,
                "hourly": [],
                "salesSummary": {
                    "quantity": 0,
                    "amount": 0
                },
                "stockSummary": {
                    "quantity": 0,
                    "amount": 0
                },
                "salesList": []
            },
            showStoreList:false,//是否显示店铺下拉框
            nowSelStore:{name:''},
            phone:""
        }
    },
    methods:{
        //选择店铺
        selThisStore(item){
            this.nowSelStore = item;
            this.showStoreList = false;

            let dateStr = new Date().Format("yyyy-MM-dd");
            this.phone = localStorage.getItem('phone');
            this.$http.get('index?storeId='+item.id+'&from='+dateStr+'&to='+dateStr+'&mobile='+this.phone).then((res)=>{
                this.homeData = res.data;
                localStorage.setItem('empId',res.data.employees.id);
                localStorage.setItem('empName',res.data.employees.name);
                // if ( res.data.datelyList[0] ) {
                //     this.drawLineChart(res.data.datelyList);
                // } else {
                //     this.drawLineChart(res.data.hourlyList);
                // }
            });
            this.enterSystem();
        },
        //切换店铺
        changeStore(){
            this.showStoreList = !this.showStoreList;
        },
        onTabClick(index) {
            this.tabIndex = index;

            let dateStr = new Date().Format("yyyy-MM-dd");

            this.$http.get('index?storeId='+this.storeData[index].id+'&from='+dateStr+'&to='+dateStr).then((res)=>{
                this.homeData = res.data;
                if ( res.data.datelyList[0] ) {
                    this.drawLineChart(res.data.datelyList);
                } else {
                    this.drawLineChart(res.data.hourlyList);
                }
            });
        },
        enterSystem: function () {
            this.$http.get('/stores/'+this.nowSelStore.id).then((res)=>{
                sessionStorage.setItem('storeName', res.data.name);
                sessionStorage.setItem('storeId', this.nowSelStore.id);
                if(res.data.makeEnabled && res.data.makeEndTime && new Date(res.data.makeEndTime).getTime() > new Date().getTime()){
                    sessionStorage.setItem('isShowBigScreenGoods', 1);
                }else{
                    sessionStorage.setItem('isShowBigScreenGoods', -1);
                }
                this.$router.push('/index');
            })

        },
        // 折线图
        drawLineChart( data ) {
            let timeArr = []; // 时间数组

            let numArr1 = []; // 销售数量
            let numArr2 = []; // 收入

            if ( data[0].date ) {
                for (let i = 0, len = data.length; i < len; i++) {
                    timeArr.push(data[i].date+'日');
                    numArr1.push(data[i].quantity);
                    numArr2.push(data[i].amount);
                }
            } else {
                for (let i = 0, len = data.length; i < len; i++) {
                    timeArr.push(data[i].hour+':00');
                    numArr1.push(data[i].quantity);
                    numArr2.push(data[i].amount);
                }
            }
            echarts.init(document.getElementById('chartLine')).setOption({
                tooltip: {
                    trigger: 'axis'
                },
                color: ["#f48080"],
                legend: {
                    data: [
                        {name:'销售额',textStyle:{color:"#666", fontSize:12}}
                    ],
                    bottom: 0,
                    itemHeight: 8
                },
                grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '17%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: timeArr,
                    axisLine: {
                        show: true, 
                        lineStyle: {
                            color: "#ddd"
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#444"
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show:true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#ddd'
                            }
                        },
                        axisLine: {
                            show: false, 
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#444",
                                fontSize: 12
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        smooth:true,
                        data: numArr2,
                        itemStyle: { normal: {label : {show: true}}}
                    }
                ]
            });
        },
        getStoreData(userName){
            this.$http({
                url:"get-all-store-sales",
                method:"GET",
                params:{
                    userName
                }
            }).then(res=>{
                if(res.data.length === 0){
                    this.$router.push('/login');
                    $toast.show("没有相关店铺数据或账号权限不足")
                    return;
                }
                this.storeData = res.data;
            })
        }
    },
    created: function () {
        // $loading.show('加载中...');

        if ( !localStorage.getItem('token') ) {
            this.$router.push('/login');
            return;
        }
        // this.$http.get('/stores?status='+false).then((res)=>{
        //     if(res.data.length === 0){
        //         this.$router.push('/login');
        //         $toast.show("没有相关店铺数据或账号权限不足")
        //         return;
        //     }
        //     this.storeData = res.data;
        //     // for (let i = 0; i < res.data.length; i++) {
        //     //     this.stores.push(res.data[i].name);
        //     // }
        //     // setTimeout(()=>{
        //     //     // this.onTabClick(0);
        //     //     //默认选择第一个店铺
        //     //     this.selThisStore(this.storeData[0]);
        //     // },300)
        // });
        let phone = localStorage.getItem("phone");
        this.getStoreData(phone);
    },
    mounted(){
        document.title = "我的店铺";
    }
}
</script>
<style lang="scss" scoped>
    @import "store";
</style>
